<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>客流设备异常报警</title>
</head>
<body>
<div id=app>

    <div id="header" class="text-box">

        <div class="title">
            <span class="desc" th:text="|[${datetime}]|" style="margin-right: 10px;"> [2020-06-01 10:00:00] </span>
            客流设备异常报警
        </div>
        <div style="margin: 15px 0;font-size: 20px;" th:text="${mallName}"></div>
    </div>


    <div style="text-align: center;margin: 0 auto;">
        <table style="  border-collapse: collapse;text-align: left;cursor: default;margin-top: 20px;border: 1px solid rgba(127, 255, 255, 0.75);-webkit-box-shadow: 0 0 8px rgba(0, 255, 255, 0.75);-moz-box-shadow: 0 0 8px rgba(0, 255, 255, 0.75);box-shadow: 0 0 8px rgba(0, 255, 255, 0.75);">
            <tbody>
            <tr class="tbTitle">
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">序号</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">设备ID</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">设备名称</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">设备类型</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">设备状态</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">设备IP</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">MAC地址</th>
                <th style="border: 1px solid rgba(127, 255, 255, 0.55);font-weight: 300;text-align: center;padding: 10px 15px;font: 15px 微软雅黑, Arial, Helvetica, sans-serif;background-color: rgba(0, 93, 93, 0.8);color: #efefef;text-shadow: 0 0 20px rgba(127, 255, 255, 1);">最后更新时间</th>
            </tr>
            <tr class="tbContext" th:each="item,stat : ${data}">
                <td th:style="'font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);background-color: rgba(' + ${stat.index%2==0?'3, 3, 3, .3':'64, 95, 235, .3'} + ');'" th:text="${stat.index+1}">序号</td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${item.deviceId}"></td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${item.deviceName}"></td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${item.deviceType}"></td>
                <td th:style="'font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);color:'+${item.cameraStatus=='正常'?'green':item.cameraStatus=='断线'?'red':'gray'}" th:text="${item.cameraStatus}"></td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${item.ipAddress}"></td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${item.macAddress}"></td>
                <td style="font: 13px 微软雅黑, Arial, Helvetica, sans-serif; text-align: center; padding: 10px 15px; color: rgba(0, 0, 0, 0.75); text-shadow: 0 0 20px rgba(0, 255, 255, 0.75);border: 1px solid rgba(127, 255, 255, 0.55);" th:text="${#temporals.format(item.lastDataTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>